import {
	Form,
	Input,
	Button,
	Toast,
} from 'antd-mobile'
import styles from './index.less'
import { ReactComponent as ChatGptSvg } from '../../assets/chatgpt.svg'
import chatgpt from '../../assets/chatgpt.png'
import { history } from 'umi'
import clxs from 'classnames'
import { useState } from 'react'
import { EyeInvisibleOutline, EyeOutline } from 'antd-mobile-icons'
import { login } from '../../services/login'


const Login = () => {
	const [nameFocusText, setNameFocusText] = useState<string>('')
	const [nameFocus, setNameFocus] = useState<boolean>(false)
	const [passFocusText, setPassFocusText] = useState<string>('')
	const [passFocus, setPassFocus] = useState<boolean>(false)
	const [visible, setVisible] = useState<boolean>(false)
	const [username, setUsername] = useState<string>()
	const [password, setPassword] = useState<string>()


	const onFinish = (values: any) => {
		login(values).then(({ result }: any) => {
			localStorage.setItem('token', result)
			history.push('/')
		}, ({ response }: any) => {
			Toast.show({ content: response?.data?.msg })
		})
	}
	const usernameOnChange = (e: string) => {
		setUsername(e)
	}
	const usernameOnFocus = () => {
		// console.log('获得焦点', !username?.length)
		setNameFocusText('start');
		setNameFocus(true);
	}
	const usernameOnBlur = () => {
		// console.log('失去焦点', !username?.length)
		!username?.length ? setNameFocusText('end') : setNameFocusText('into')
	}

	const passwordOnChange = (e: string) => {
		setPassword(e)
	}
	const passwordOnFocus = () => {
		// console.log('获得焦点', !password?.length)
		setPassFocusText('start');
		setPassFocus(true);
	}
	const passwordOnBlur = () => {
		// console.log('失去焦点', !password?.length)
		!password?.length ? setPassFocusText('end') : setPassFocusText('into')
	}

	return (
		<div className={styles.box_view}>
			<div className={styles.header_view}>
				<img src={chatgpt} />
			</div>
			<h1 className={styles.welcome}>Welcome Deepseek</h1>
			<div className={styles.content_view}>
				<Form
					layout='horizontal'
					onFinish={onFinish}
					footer={
						<Button block type='submit' className={styles.submit_btn} size='large'>登录</Button>
					}>
					<Form.Item
						name='username'
						rules={[{ required: true, message: '用户名不能为空' }]}>
						<div className={styles.form_item}>
							<Input onChange={(e) => usernameOnChange(e)} onFocus={() => usernameOnFocus()} onBlur={() => usernameOnBlur()} className={styles.username} />
							<div style={nameFocus ? { display: 'block' } : {}} className={clxs(styles.username_text, nameFocusText === 'start' && styles.name_animation_start, nameFocusText === 'end' && styles.name_animation_end, nameFocusText === 'into' && styles.name_into)}>用户名</div>
						</div>
					</Form.Item>
					<Form.Item
						name='password'
						rules={[{ required: true, message: '密码不能为空' }]}>
						<div className={clxs(styles.form_item, styles.password_input)} style={{ marginTop: '2rem' }}>
							<Input onChange={(e) => passwordOnChange(e)} onFocus={() => passwordOnFocus()} onBlur={() => passwordOnBlur()} className={styles.username} type={visible ? 'text' : 'password'} />
							<div className={styles.eye}>
								{!visible ? (
									<EyeInvisibleOutline onClick={() => setVisible(true)} />
								) : (
									<EyeOutline onClick={() => setVisible(false)} />
								)}
							</div>
							<div style={passFocus ? { display: 'block' } : {}} className={clxs(styles.password_text, passFocusText === 'start' && styles.pass_animation_start, passFocusText === 'end' && styles.pass_animation_end, passFocusText === 'into' && styles.pass_into)}>密码</div>
						</div>
					</Form.Item>
				</Form>
			</div>

			<p className={styles.tip_txt}>没有帐户？ <span onClick={() => history.push('/register')}>注册</span></p>
		</div>
	)
}

export default Login